<template>
  <div class="dc-page-design-l-comp">
    <div class="dc-page-design-l-comp-c">
      <dc-container title="基础组件">
        <left-comp-list :comp-list="baseList" />
      </dc-container>

      <dc-container title="高级组件" :expand="false">
        <left-comp-list :comp-list="advList" />
      </dc-container>

      <dc-container title="容器组件" :expand="false">
        <left-comp-list :comp-list="containerList" />
      </dc-container>

      <dc-container title="图表组件" :expand="false">
        <left-comp-list :comp-list="chartList" />
      </dc-container>

      <dc-container title="大数据组件" :expand="false">
        <left-comp-list :comp-list="bigdataList" />
      </dc-container>

      <dc-container title="扩展组件" :expand="false">
        <left-comp-list :comp-list="extList" />
      </dc-container>
    </div>
  </div>
</template>

<script setup>
import LeftCompList from './left-comp-list.vue'
import DcContainer from '@/components/dc-container/index.vue'

import { compConfig } from '@/packages/comp-config.js'

const handlerCompList = compList => {
  if (!Array.isArray(compList)) {
    return []
  }
  return compList.map(item => item.templateConfig).sort((a, b) => a.sort - b.sort)
}

const baseList = handlerCompList(compConfig.componentModules['base-comps'])

const advList = handlerCompList(compConfig.componentModules['advanced-comps'])

const containerList = handlerCompList(compConfig.componentModules['container-comps'])

const chartList = handlerCompList(compConfig.componentModules['chart-comps'])

const bigdataList = handlerCompList(compConfig.componentModules['bigdata-comps'])

const extList = handlerCompList(compConfig.componentModules['ext-comps'])

</script>

<style lang='scss' scoped>
</style>
